<template>
  <el-table
      ref="singleTableRef"
      highlight-current-row
      style="width: 100%"
      :data="appointments"
  >
    <el-table-column type="index" width="30" />
    <el-table-column property="nickName" label="预约人" />
    <el-table-column property="appointmentTime" label="预约时间" />
    <el-table-column property="appointmentType" label="预约类型" />
    <el-table-column property="notes" label="备注" />
    <el-table-column property="updatedAt" label="订单创建时间" />
    <el-table-column property="appointmentStatus" label="订单状态" />
    <el-table-column label="操作订单">
      <template #default="scope">
        <!-- 这里可以添加按钮或其他操作 -->
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const appointments = ref<Array<any>>([]);

onMounted(() => {
  allappolist();
});
const allappolist =async () => {
  try {
    const response = await axios.get('/wx/allappointlist');
    const formattedAppointments = response.data.data.map(appointment => {
      // 假设appointmentTime是ISO 8601格式的字符串
      const dateStr = appointment.appointmentTime;
      const dateOnly = dateStr.split('T')[0]; // 使用split提取日期部分
      return {
        ...appointment, // 复制其他属性
        appointmentTime: dateOnly // 替换为仅包含日期的字符串
      };
    });

    // 过滤出状态
    const filteredAppointments = formattedAppointments.filter(appointment => {
      return appointment.appointmentStatus === '已完成';
    });

    appointments.value = filteredAppointments;
  } catch (error) {
    console.error('Error fetching appointments:', error);
  }
}
</script>

<style scoped>
/* 你的样式 */
</style>